<div id="<?php echo $this->panel->getDivID() ?>">
    <div class="RM_advanced_search_amenities_container">
        <table width="90%" border="0" cellpadding="0" cellspacing="0" align="center" class="RM_advancedsearch_formrow">
                <tr>
                    <td class="RM_advancedsearch_leftcolumn">
                        <?php echo $this->_translate->_('User.Amenities.Main','SearchLabel');?>
                    </td>
                    <td>
                        <div id="RM-amenities-module-search-display">
                            <img src="<?php echo RM_Environment::getConnector()->getRootURL(); ?>RM/userdata/images/system/small/loading_bar.gif" border="0">
                        </div>
                    </td>
                </tr>
        </table>
    </div>
</div>
<input type="hidden" id="search[amenities]" name="search[amenities]">
<script type="text/javascript">

function updateAmenitiesSelection(id, checkBoxValue){

    var newSelection;
    var currentSelection = document.getElementById("search[amenities]").value;
    var selectionArray = RM.Common.explode(",",currentSelection);

    if (checkBoxValue){
        // add value

        if (!RM.Common.InArray(id,selectionArray)){
            // add to the hidden text feild
            if (currentSelection == "") {
                newSelection = id;
            } else {
                newSelection = currentSelection + "," + id;
            }
            document.getElementById("search[amenities]").value = newSelection;
        }

    } else {
        // remove value

        if (RM.Common.InArray(id,selectionArray)){

            var si=0;for (si; si < selectionArray.length; si++){
                if (id === selectionArray[si]) {
                    selectionArray.splice(si,1);
                } 
            }

            newSelection = RM.Common.implode(",",selectionArray)
            document.getElementById("search[amenities]").value = newSelection;
        }
    }
}

// Send an AJAX request for the amenities data
var conn = new Ext.data.Connection();
var request = {
    url: RM.Common.AssembleURL({
        controller : 'Amenities',
        action: 'getamenitiesjson'
    }),
    method: 'POST',
    success: function(responseObject) {
        var data = Ext.util.JSON.decode(responseObject.responseText);

        var html = ''; var iconURL = ''; var rowIndex

        // this is the number of columns to render
        var columns = 3;
        
        // start a table
        html += "<table width='1' align='left' class='rm-module-amenities-search-amenity-cell-table'><tr>";
        
        var i = 0;for (i; i < data.length; i++ ){
            // create an amenities cell...

            iconURL = RM.RootURL + "RM/userdata/images/Amenities/" + data[i].icon_url;
            
            html += "<td valign='top' align='center' width='30'>";
            html += "<input class='rm-module-amenities-search-selection-checkbox' type='checkbox' value='1' onclick='updateAmenitiesSelection(\"" + data[i].id + "\",this.checked)'>";
            html += "<img src='" + iconURL + "' alt='' height='30'><br/><div class='rm-module-amenities-amenity-cell-inner-textlabel'>" + data[i].name + "</div>";
            html += "<td>";

            // this adds a table row when we reach our number of configured columns
            rowIndex = i + 1;
            if((rowIndex  % columns) === 0){
                html += "</tr><tr>";
            }
        }

        // close the table
        html += "</tr></table>";

        document.getElementById("RM-amenities-module-search-display").innerHTML=html;
    },
    failure: function(){}
};
conn.request(request);

if(typeof(RM_advanced_search_form_items) !== 'undefined') {
    RM_advanced_search_form_items.push('search[amenities]');
}
</script>
